<script setup>
import { useDetailStore } from '@/stores/detail.js';

const detailStore = useDetailStore();
</script>
<template>
	<ul class="good-sales">
		<li>
			<p>销量人气</p>
			<p> {{ detailStore.goods.salesCount }} </p>
			<p><font-awesome-icon icon="fa-solid fa-flag" class="icon-flag" />销量人气</p>
		</li>
		<li></li>
		<li>
			<p>商品评价</p>
			<p>{{ detailStore.goods.commentCount }}</p>
			<p><font-awesome-icon icon="fa-solid fa-message" class="icon-flag" />查看评价</p>
		</li>
		<li></li>
		<li>
			<p>收藏人气</p>
			<p>{{ detailStore.goods.collectCount }}</p>
			<p><font-awesome-icon icon="fa-solid fa-star" class="icon-flag" />收藏商品</p>
		</li>
		<li></li>
		<li>
			<p>品牌信息</p>
			<p>{{ detailStore.goods.brand?.name }}</p>
			<p><font-awesome-icon icon="fa-solid fa-sun" class="icon-flag" />品牌主页</p>
		</li>
	</ul>
</template>

<style scoped lang="scss">
.good-sales {
	display: flex;

	li {
		text-align: center;
		margin: 10px;

		p {
			margin: 5px 0;

			&:first-child {
				color: #999;
			}

			&:nth-child(2) {
				color: $priceColor;
			}

			.icon-flag {
				color: $sucColor;
				margin-right: 5px;
			}
		}

		&:nth-child(2n) {
			display: block;
			width: 1px;
			height: 60px;
			margin: auto 1px;
			background-color: #eee;
		}
	}
}
</style>